<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4">
<head>
    <meta charset="UTF-8">
    <title>投稿</title>

    <link rel="stylesheet" type="text/css" th:href="@{/plugins/font-awesome-4.7.0/css/font-awesome.min.css}">
    <!-- bootstrap 5.x and 4.x is supported. You can also use the bootstrap css 3.3.x versions -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
    <link href="https://cdn.jsdelivr.net/gh/kartik-v/bootstrap-fileinput@5.2.1/css/fileinput.min.css" media="all" rel="stylesheet" type="text/css" />
    <!-- if using RTL (Right-To-Left) orientation, load the RTL CSS file after fileinput.css by uncommenting below -->
    <!-- link href="https://cdn.jsdelivr.net/gh/kartik-v/bootstrap-fileinput@5.2.1/css/fileinput-rtl.min.css" media="all" rel="stylesheet" type="text/css" /-->
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <!-- piexif.min.js is needed for auto orienting image files OR when restoring exif data in resized images and when you
        wish to resize images before upload. This must be loaded before fileinput.min.js -->
    <script src="https://cdn.jsdelivr.net/gh/kartik-v/bootstrap-fileinput@5.2.1/js/plugins/piexif.min.js" type="text/javascript"></script>
    <!-- sortable.min.js is only needed if you wish to sort / rearrange files in initial preview.
        This must be loaded before fileinput.min.js -->
    <script src="https://cdn.jsdelivr.net/gh/kartik-v/bootstrap-fileinput@5.2.1/js/plugins/sortable.min.js" type="text/javascript"></script>
    <!-- popper.min.js below is needed if you use bootstrap 4.x. You can also use the bootstrap js
       3.3.x versions without popper.min.js. -->
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
    <!-- bootstrap.min.js below is needed if you wish to zoom and preview file content in a detail modal
        dialog. Bootstrap 5.x and 4.x is supported. You can also use the 3.3.x versions. -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js" type="text/javascript"></script>
    <!-- the main fileinput plugin file -->
    <script src="https://cdn.jsdelivr.net/gh/kartik-v/bootstrap-fileinput@5.2.1/js/fileinput.min.js"></script>
    <!-- optionally if you need a theme like font awesome theme you can include it as mentioned below -->
    <script src="https://cdn.jsdelivr.net/gh/kartik-v/bootstrap-fileinput@5.2.1/themes/fa/theme.js"></script>
    <!-- optionally if you need translation for your language then include  locale file as mentioned below (replace LANG.js with your locale file) -->
    <script src="https://cdn.jsdelivr.net/gh/kartik-v/bootstrap-fileinput@5.2.1/js/locales/LANG.js"></script>
    <!--    jquery.toast 提示框组件-->
    <link rel="stylesheet" type="text/css" th:href="@{/plugins/toast/jquery.toast.css}">
    <!--    导入layui组件，优秀的弹窗框架-->
    <link rel="stylesheet" th:href="@{/plugins/layui-v2.6.8/layui/css/layui.css}">

    <!--    导入layui组件，优秀的弹窗框架-->
    <script th:src="@{/plugins/layui-v2.6.8/layui/layui.js}"></script>

</head>
<body>
<div class="col-md-12">
    <div class="row">
        <ul class="nav nav-tabs" role="tablist">
            <li class="nav-item">
                <a class="nav-link active" href="#allAttachment" role="tab" data-toggle="tab">已投稿</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#uploadAttachment" role="tab" data-toggle="tab">投稿</a>
            </li>
        </ul>
    </div>
    <div class="tab-content">
        <!--            所有附件-->
        <div role="tabpanel" class="tab-pane active" id="allAttachment">
            <table class="layui-table" lay-skin="line">
                <colgroup>
                    <col width="150">
                    <col width="150">
                    <col width="200">
                    <col>
                </colgroup>
                <thead>
                <tr>
                    <th>稿件名称</th>
                    <th>时间</th>
                    <th>投稿状态</th>
                </tr>
                </thead>
                <tbody>
                <tr th:each="list : ${userManuscripts}">
                    <td >
                        <div class="btn-group">
                            <a  th:href="@{'/manuscript/download/'+${list.id}+'/'+${list.manuscriptName}}"  title="下载" th:text="${list.manuscriptName}" >

                            </a>
                        </div>
                    </td>
                    <td th:text="${#dates.format(list.manuscriptCreateDate,'yyyy/MM/dd HH:mm:ss')}">1989-10-14</td>
                    <td th:if="${list.manuscriptStatus}==0">审核中</td>
                    <td th:if="${list.manuscriptStatus}==1">通过</td>
                    <td th:if="${list.manuscriptStatus}==2">未通过</td>
                </tr>
                </tbody>
            </table>
        </div>
        <!--            上传附件-->
        <div role="tabpanel" class="tab-pane" id="uploadAttachment">
            <div class="tile">
                <div class="file-loading">
                    <!--                        这里的input是一个封装的组件，用于上传文件-->
                    <input id="input-fas" autocomplete="off" name="file" type="file" class="file-loading" multiple>
                    <span sec:authentication="name" style="display: none" id="userName"></span>
                </div>
            </div>
        </div>
    </div>
</div>

<!--    选择中文-->
<script th:src="@{/plugins/bootstrap-fileinput/js/locales/zh.js}"></script>

<!--    jquery.toast 提示框组件-->
<script th:src="@{/plugins/toast/jquery.toast.js}"></script>
<script type="text/javascript">
    var userName = $("#userName").text()
    $("#input-fas").fileinput(
        {
            theme : "fa",
            uploadUrl : "/uploadManuscript/"+userName,
            language : 'zh',
            uploadAsync : true,
            maxFileCount : 10,
            allowedFileExtensions : [ 'doc','pdf', 'docx'],
            enctype : 'multipart/form-data',
            showClose : false,
            dropZoneEnabled: true,//是否显示拖拽区域

        }).on("filebatchuploadcomplete", function(event, files, extra) {
        $.toast({  // 依赖于 jquery.toast 提示框组件
            text : "上传成功！",
            heading : '提示',
            icon : 'success',
            showHideTransition : 'fade',
            allowToastClose : true,
            hideAfter : 1000,
            stack : 1,
            position : 'top-center',
            textAlign : 'left',
            loader : true,
            loaderBg : '#ffffff',
            afterHidden : function() {
                window.location.reload();
            }
        });
    });

    function choice(filePath,fileName) {
        // var id = $("#showId").val();
        // alert(filePath)
        // alert(fileName)
        $("#" + 'fileName' + "", window.parent.document).attr("value", fileName);
        $("#" + 'articleThumbnail' + "", window.parent.document).attr("value", filePath);
        $("#" + 'userImg' + "", window.parent.document).attr("src", filePath);
        parent.layer.closeAll();
    }
</script>
</body>
</html>